<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>附近的人</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link href="layui-v2.6.4/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="layui-v2.6.4/layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript">
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
</head>
<body>
<div class="div_top" th:replace="include/top"></div>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;border-color: #3e0656;">
        <legend>附近的人</legend>
    </fieldset>
    <div class="">
        <a class="layui-btn layui-btn-sm layui-btn-normal" id="addJW">还没有位置?点击设置</a>
        <a class="layui-btn layui-btn-sm layui-btn-warm" href="/tonearpeople" id="toditu">查看全部用户</a>
    </div>
    <hr>
    <div id="rongqi"></div>
</div>
</body>
<script th:inline="javascript" type="text/javascript">
    var namelist = /*[[${namelist}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var infolist = /*[[${infolist}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var mlsit = /*[[${mlsit}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var pages = /*[[${pages}]]*/2;
    layui.use(['layer', 'table', "laypage", "jquery"], function () {
        var
            layer = layui.layer //弹层
            ,
            table = layui.table //表格
            ,
            laypage = layui.laypage //分页
            ,
            $ = layui.jquery
        $('#addJW').on("click", function () {
            layer.open({
                type: 2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: '/getJWmap'
            });
        });
    });

    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#rongqi', //流加载容器
            scrollElem: '#rongqi',
            isAuto: true,
            isLazyimg: true,
            end: '到底了哦',
            done: function (page, next) {
                setTimeout(function () {
                    var lis = [];
                    var limit = 5;
                    if (page == pages) {
                        limit = namelist.length - limit * (page - 1);
                    }
                    for (var i = 0; i < limit; i++) {
                        lis.push(
                            '<div class="layui-row" style=" border: 1px solid #007DDB;border-radius: 25px;margin: 10px;">\n' +
                            '            <div class="layui-row layui-col-md6" >\n' +
                            '                <div class="layui-circle layui-col-md1" style="background-color: #34ff56;height: 50px;text-align: center;font-size: large;padding: 10px;margin: 10px;color: white;">' + namelist[eval((page - 1) * limit + i)].substr(0, 1) + '</div>\n' +
                            '                <div class="layui-col-md3 layui-elip" style="padding: 24px;font-size: large;">' + namelist[eval((page - 1) * limit + i)] + '</div>\n' +
                            '                <div class="layui-col-md7 layui-elip" style="padding: 24px;font-size: large;">' + infolist[eval((page - 1) * limit + i)] + '</div>\n' +
                            '            </div>\n' +
                            '            <div class="layui-col-md2 layui-col-md-offset4  layui-elip" style="font-size: large;padding: 24px;">\n' +
                            '                距离:<span style="font-size: large;">' + mlsit[eval((page - 1) * limit + i)] + 'm</span>\n' +
                            '            </div>\n' +
                            '        </div>'
                        )
                    }
                    next(lis.join(''), page < pages);
                }, 500);
            }
        });
    });
</script>
</html>
